<template>
  <div id="CesiumContainer"></div>
  <div id="loadingOverlay"><h1>Loading...</h1></div>
  <div id="toolbar"></div>
</template>

<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
import { useBaseAppStore } from '@/stores/baseApp'
const store = useBaseAppStore()

// 配置地图根目录

let electronic = new Cesium.UrlTemplateImageryProvider({
  url: 'url', // url 地址
  fileExtension: 'jpg' // 类型
  // 生成地图电子底图（new Cesium.UrlTemplateImageryProvider({})）
})

let satellite = new Cesium.ArcGisMapServerImageryProvider({
  url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
  // 生成地图卫星底图（ new Cesium.ArcGisMapServerImageryProvider({}) ）
})

const cesiumOptions = {
  baseLayer: '',
  electronic,
  satellite,
  mode: 'earth'
  // earth 3D 2D
  //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
}

const initCesium = () => {
  // window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
  Cesium.Ion.defaultAccessToken = store.cesiumToken
  const viewer = new Cesium.Viewer('CesiumContainer', {
    //需要进行可视化的数据源的集合
    infoBox: true, // 禁用沙箱，解决控制台报错 //是否显示点击要素之后显示的信息
    animation: false, //是否显示动画控件
    selectionIndicator: false,
    shouldAnimate: true, // 是否使用动画
    homeButton: true, //是否显示Home按钮
    fullscreenButton: true, //是否显示全屏按钮
    baseLayerPicker: true, //是否显示图层选择控件
    geocoder: true, //是否显示地名查找控件
    timeline: false, //是否显示时间线控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: true, //是否显示帮助信息控件
    requestRenderMode: true, //启用请求渲染模式
    scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
    sceneMode:
      (cesiumOptions.mode == 'earth' && Cesium.SceneMode.SCENE3D) ||
      (cesiumOptions.mode == '3D' && Cesium.SceneMode.COLUMBUS_VIEW) ||
      Cesium.SceneMode.SCENE2D, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    fullscreenElement: document.body //全屏时渲染的HTML元素 暂时没发现用处
    // imageryProvider:
    //   (cesiumOptions.baseLayer == 'satellite' && cesiumOptions.satellite) ||
    //   cesiumOptions.electronic
  })
  console.log('viewer', viewer)
  //隐藏cesium左下角logo
  viewer._cesiumWidget._creditContainer.style.display = 'none'

  // 开启抗锯齿
  viewer.scene.postProcessStages.fxaa.enabled = true

  // 相机高度最大值，限制缩小级别
  let cameraHeight = 1.1e7
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = cameraHeight * 3

  // 深度开启或关闭
  viewer.scene.globe.depthTestAgainstTerrain = false

  // 取消默认的双击放大时间
  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
  )

  // 引起事件监听的相机变化幅度
  viewer.camera.percentageChanged = 0.02
}

onMounted(() => {
  initCesium()
})
</script>

<style>
#CesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
